<template>
	<div class="main">
		<div class="loading loadingbj" v-if="isLoading">
			<div class="ndbt loading-text">辉煌足迹--{{ currentName }}</div>
			<Progress :progress="progressNum" style="position: absolute; top: 40%;" />
		</div>
		<template>
			<div class="themeBox" @click="showNav()"></div>
			<div class="swiper-container" id="swiper-container" style="height: 100%;width: 100%;">
				<div class="swiper-wrapper">
					<div class="swiper-slide" v-for="(sItem, index) in showSwiperList" :key="index">
						<div class="content-view">
							<template v-if="sItem.isHomePage">
								<div class="ndbt loading-text">{{ currentMenuName }}之旅</div>
							</template>
							<template v-else>
								<div class="divimg">
									<img class="swiperimg" :src="sItem.picture" />
								</div>
								<h4 class="swiperh3 bt">{{ sItem.title }}</h4>
								<div class="swiperp">
									<p>{{ sItem.subtitle }}</p>
									<!-- <p>&nbsp;</p>
									<p>&nbsp;</p>
									<p>&nbsp;</p> -->
								</div>
							</template>
						</div>
					</div>
					<div style="color: transparent;" ref="refSwiperPrev" class="swiper-button-prev"></div>
					<div style="color: transparent;" ref="refSwiperNext" class="swiper-button-next"></div>
				</div>
			</div>
			<div class="swiper-pagination"
				style="left: 0px; z-index: 100000;height: 2px;width: 100%;position: absolute;bottom: 0px;display:none;"></div>

			<div class="navigation" v-if="!isLoading">
				<div class="navigationItem" @click="goTo('prev')">
					<img src="../assets/prevPage.png" />
				</div>
				<div class="navigationItem" @click="$router.push('/')">
					<img src="../assets/index.png" />
				</div>
				<div class="navigationItem" @click="goTo('next')">
					<img src="../assets/nextPage.png" />
				</div>
			</div>
		</template>

		<!-- 播放器 -->
		<audio-play ref="refAudioPlay"></audio-play>

		<!-- 主题内容 -->
		<drawer title="主题" :display.sync="isShowNav" :inner="true" :width="isShowNav ? drawerWidth : '0vw'" :mask="false">
			<ul class="cd-nav">
				<li v-for="item in menuList" @click="clickMenuItem(item.id)" :key="item.id">
					<img :src="item.picture" />
				</li>
			</ul>
		</drawer>
	</div>
</template>
<script>
import Swiper from 'swiper';
import 'swiper/css/swiper.min.css';
import AudioPlay from '@/components/AudioPlay.vue';
import Drawer from '@/components/Drawer.vue';
import Progress from '@/components/Progress.vue';
import { baseUrlImg, getZTData } from '@/api/index.js'

export default {
	name: "yearsArticle",
	components: {
		AudioPlay,
		Drawer,
		Progress,
	},
	data() {
		return {
			isLoading: true,
			swiper: null,
			swiperList: [],
			showSwiperList: [],
			isShowNav: false,
			drawerWidth: '70vw',
			menuList: [],
			loadSetInterval: null,
			progressNum: 20,
			currentName: '',
			currentMenuName: ''
		}
	},
	mounted() {
		this.getSwiper();
		if (this.$route.params) {
			this.dataInfo = this.$route.params
			this.currentName = this.dataInfo.coverTitle
			if (this.dataInfo.music) {
				this.$refs.refAudioPlay.playAudio(baseUrlImg + this.dataInfo.music);
			}
			const tempList = []
			this.dataInfo.pictureTextContent?.map((p) => {
				if (p.picture.indexOf(baseUrlImg) == -1) {
					p.picture = baseUrlImg + p.picture
				}
				tempList.push(p)
			})
			this.swiperList = tempList
		}
		this.getZTDataFunc()
	},
	methods: {
		getSwiper() {
			this.swiper = new Swiper(".swiper-container", {
				speed: 500,
				autoplay: {
					delay: 5000,
					disableOnInteraction: false,
				},
				observer: true, //修改swiper自己或子元素时，自动初始化swiper
				observeParents: false, //修改swiper的父元素时，自动初始化swiper
				loop: true,
				zoom: false,
				effect: 'coverflow',
				//effect: 'cube',
				pagination: {
					el: '.swiper-pagination',
					type: 'progressbar',
				},
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
				on: {
					slideChange: function () {
						//console.log(this);
						// console.log(this.activeIndex);
					},
					onSlideChangeEnd: function (swiper) {
						swiper.update();
						this.swiper.startAutoplay();
						//this.swiper.reLoop();
					},
					slideChangeTransitionEnd: function () {

					}
				}
			})
		},
		next() {
			this.$refs.refSwiperNext.click();
		},
		prev() {
			this.$refs.refSwiperPrev.click();
		},
		goTo(url) {
			if (url === 'prev') {
				this.prev();
			} else if (url === 'next') {
				this.next();
			} else if (url === 'index') {

			}
		},
		showNav() {
			this.isShowNav = !this.isShowNav;
		},
		replaceShowMenuList(index) {
			console.log(index);
			let tempData = this.menuList.find((m) => m.id == index);
			this.currentMenuName = tempData.name
			let tempList = this.swiperList.filter((item) => {
				return item.theme == index;
			}).map((item) => {
				const tempItem = item;
				tempItem.isHomePage = false;
				if (tempData == null) {
					tempData = item;
				}
				return tempItem;
			});
			tempList.unshift({
				...tempData,
				isHomePage: true,
			});
			this.showSwiperList = [...tempList];
		},
		clickMenuItem(index) {
			this.replaceShowMenuList(index);
			this.swiper.slideTo(0, 0);
			setTimeout(() => {
				this.showNav();
			}, 100);
		},
		getZTDataFunc() {
			getZTData().then(res => {
				if (res.data && res.data.length > 0) {
					const dataList = res.data
					dataList.map((item) => {
						if (item.picture) {
							item.picture = baseUrlImg + item.picture
						}
					})
					this.menuList = dataList
					// 模拟加载完成
					this.loadSetInterval = setInterval(() => {
						this.progressNum += 8;
						if (this.progressNum >= 105) {
							clearInterval(this.loadSetInterval);
							this.loadSetInterval = null;
							this.replaceShowMenuList(dataList[0].id);
							setTimeout(() => {
								this.isLoading = false;
							}, 300);
						}
					}, 200);
				} else {
					this.menuList = []
				}
			});
		}
	}
}
</script>
<style scoped src="../../public/css/styles2.css"></style>
<style scoped>
.main {
	position: relative;
	width: 100vw;
	height: 100vh;
	background-color: #fff;
	background: url(../assets/bj.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	background-size: 100% 100%;
	max-width: 640px;
	margin: 0 auto;
}

.loadingbj {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100000;
	background-color: #fff;
	background: url(../assets/index_bj.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	background-size: 100% 100%;
}

.themeBox {
	position: absolute;
	top: 0.9rem;
	right: 0.8rem;
	width: 0.6rem;
	height: 0.6rem;
	background: url(../assets/themeLogo.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
	z-index: 999;
}

.navigation {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
	z-index: 99999;
}

.navigationItem {
	display: block;
	width: 18%;
}

.navigationItem img {
	width: 100%;
}

.divimg {
	width: 100%;
	height: 30%;
	position: relative;
	margin-top: 1.4rem;
	margin-bottom: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.swiperp {
	width: 100%;
	text-indent: 1.2rem;
	font-size: 0.5rem;
	flex: 1;
}

.loading {
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 9990;
	left: 0;
	top: 0;
	display: block;
}

.expand {
	height: 3px;
	margin: 2px 0;
	background: #cf2e1e;
	position: absolute;
	box-shadow: 3px 0px 18px 3px #ec402f;
	top: 65%;
	width: 0%;
}

.logo {
	position: fixed;
	left: 50%;
	top: 33.55%;
	display: block;
	height: 15.79%;
	transform: translateX(-50%);
}

.content-view {
	width: 90%;
	height: 100%;
	margin-left: 5%;
	padding: 0 0.4rem;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding-bottom: 3.5rem;
	max-width: 640px;
}

.swiper-slide {
	width: 100%;
	height: 100%;
	position: relative;
	margin-top: 0.3rem;
}

@media only screen and (min-width:640px) {
	.loading-text {
		font-size: 0.4rem;
	}

	.themeBox {
		top: 0.3rem;
		right: 0.3rem;
		width: 0.3rem;
		height: 0.3rem;
		cursor: pointer;
	}

	.content-view {
		margin: 0 auto;
		padding: 0 0.2rem;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		padding-bottom: 1.5rem
	}

	.swiper-slide {
		margin-top: 0.1rem;
	}

	.divimg {
		margin-top: 0.4rem;
		margin-bottom: 0.2rem;
	}

	.swiperh3 {
		font-size: 0.2rem;
		line-height: 0.4rem;
	}

	.swiperp {
		font-size: 0.2rem;
		line-height: 0.4rem;
		text-indent: 0.4rem;
		padding: .1rem;
	}

	.navigation {
		height: 1.3rem;
	}
}
</style>